<template>
  <div class="main">
    <div class="info">
      <div class="info-line"></div>
      <div class="info-title">
        修改详情：{{ getGameName(form.gameId) }}
        <span class="info-title-erp"> (erp id: {{ form.id }}) </span>
      </div>
    </div>
    <div>
      <el-form
        class="form-data form-box"
        ref="form"
        :model="form"
        :rules="rules"
        :inline="true"
        label-width="auto"
        v-loading="loading"
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基础信息" name="1">
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="f17"
                  v-if="form.gameName == '原神'"
                  label="自动截图"
                >
                  <el-switch
                    v-model="form.ifAuto"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="true"
                    :inactive-value="false"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  prop="f17"
                  v-if="form.gameName == '王者荣耀'"
                  label="营地ID"
                  class="attr-input-content"
                >
                  <div class="input-btn flex">
                    <el-input
                      v-model="form.f17"
                      color="#333"
                      placeholder="请输入营地ID加载数据"
                      @keyup.enter.native="getRoleList"
                      style="flex-shrink: 0"
                    ></el-input>
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      @click="getRoleList"
                      style="margin-left: 20px"
                      :loading="btnLoading"
                      >加载数据</el-button
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 和平精英个性化属性 start -->
                <el-form-item
                  prop="f13"
                  v-if="form.gameName == '和平精英'"
                  label="扫码授权"
                  class="attr-input-content"
                >
                  <div class="input-btn flex">
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      @click="getQRcode"
                      style="margin-left: 20px"
                      :loading="btnLoading"
                      >授权</el-button
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 无畏契约 -->
                <el-form-item
                  prop="f13"
                  v-if="form.gameName == '无畏契约'"
                  label="扫码授权"
                  class="attr-input-content"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click="WWGetQrcode"
                    :loading="btnLoading"
                    >QQ授权</el-button
                  >
                  <!--<shengyu ref="shengyu" />-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- LOL个性化属性 start -->
                <el-form-item
                  prop="f13"
                  v-if="form.gameName == '英雄联盟'"
                  label="扫码授权"
                  class="attr-input-content"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click="lolGetQrcode('LOL')"
                    :loading="btnLoading"
                    >QQ授权</el-button
                  >
                </el-form-item>
                <br v-if="form.gameName == '英雄联盟'" />
                <!-- LOL个性化属性 end -->
                <!-- LOL手游个性化属性 start -->
                <el-form-item
                  prop=""
                  v-if="form.gameId == '25'"
                  label="扫码授权"
                  class="attr-input-content"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    plain
                    @click="lolGetQrcode('LOLM')"
                    :loading="btnLoading"
                    >QQ授权</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- CF个性化属性 start -->
                <el-form-item
                  v-if="form.gameName == '穿越火线'"
                  label="扫码授权"
                  class="attr-input-content"
                >
                  <div class="input-btn flex">
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      @click="getQRcodeCF"
                      style="margin-top: 3px"
                      :loading="btnLoading"
                      >QQ授权</el-button
                    >
                  </div>
                </el-form-item>
                <!-- CF个性化属性 end -->
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 金铲铲个性化属性 start -->
                <el-form-item
                  v-if="form.gameId == '16'"
                  class="attr-input-content"
                  label="扫码授权"
                >
                  <div class="input-btn flex">
                    <el-button
                      type="primary"
                      @click="getQRcodeJCC"
                      :loading="btnLoading"
                      >快速发布</el-button
                    >
                  </div>
                </el-form-item>
                <br v-if="form.gameId == '16'" />
              </el-col>
            </el-row>
            <el-form-item label="系统" prop="systemId">
              <el-select
                v-model="form.systemId"
                placeholder="请选择系统"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in sysList"
                  :key="dict.id"
                  :label="dict.fieldName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="运营商" prop="trading">
              <el-select
                v-model="form.carrierId"
                placeholder="请选择运营商"
                @change="getAreaList(form.carrierId)"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in carrierList"
                  :key="dict.id"
                  :label="dict.fieldName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="大区"
              prop="areaId"
              v-if="areaList && areaList.length != 0"
            >
              <el-select
                v-model="form.areaId"
                placeholder="请选择大区"
                @change="getServiceList(form.areaId)"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in areaList"
                  :key="dict.id"
                  :label="dict.fieldName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="服务器"
              prop="serverId"
              v-if="serverList && serverList.length != 0"
            >
              <el-select
                v-model="form.serverId"
                placeholder="请选择服务器"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in serverList"
                  :key="dict.id"
                  :label="dict.fieldName"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="商品描述" prop="descs">
              <div>
                <el-button type="primary" size="small" @click="zidongChange"
                  >自动识别</el-button
                >
              </div>
              <el-input
                type="textarea"
                v-model="form.descs"
                :rows="8"
                maxlength="800"
                show-word-limit
                placeholder="请输入商品描述"
                style="width: 1000px"
              />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="属性信息" name="2">
            <!-- <el-row>
              <template v-for="config in configList">
                <el-form-item
                  :label="config.fieldName"
                  :prop="config.aavName"
                  v-if="config.fieldType == 'input'"
                  :key="config.id"
                >
                  <el-input
                    v-model="form[config.aavName]"
                    :placeholder="'请输入' + config.fieldName"
                  />
                </el-form-item>
                <el-form-item
                  :label="config.fieldName"
                  :prop="config.aavName"
                  v-else-if="
                    config.fieldType == 'regional' ||
                    config.fieldType == 'dan' ||
                    config.fieldType == 'radio'
                  "
                  :key="config.id"
                >
                  <el-radio-group v-model="form[config.aavName]">
                    <el-radio
                      :label="item.id"
                      v-for="item in config.childAttributes"
                      :key="item.id"
                      >{{ item.fieldName }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-row
                  v-else-if="config.fieldType == 'checkbox'"
                  :key="config.id"
                >
                  <el-col :span="24">
                    <el-form-item
                      :label="config.fieldName"
                      :prop="config.aavName"
                    >
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                      <el-checkbox-group v-model="form[config.aavName]">
                        <el-checkbox
                          :label="item.id"
                          v-for="item in config.childAttributes"
                          :key="item.id"
                          >{{ item.fieldName }}</el-checkbox
                        >
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item
                  :label="config.fieldName"
                  :prop="config.aavName"
                  v-else-if="config.fieldType == 'number'"
                  :key="config.id"
                >
                  <el-input-number
                    v-model="form[config.aavName]"
                    :placeholder="'请输入' + config.fieldName"
                    :controls="false"
                  />
                </el-form-item>
              </template>
            </el-row> -->
            <!-- 渲染自定义字段 -->
            <div v-if="attrs && attrs.length">
              <span v-for="custom in attrs" :key="custom.id">
                <div
                  v-if="
                    custom.fieldType == 'checkbox' ||
                    custom.fieldType == 'boxradio'
                  "
                ></div>
                <el-form-item
                  :label="custom.fieldName"
                  :prop="custom.aavName"
                  v-if="custom.isEnable === '0' && custom.fieldType != 'image'"
                >
                  <el-input
                    v-model="form[custom.aavName]"
                    :placeholder="`请填写${custom.fieldName}`"
                    v-if="custom.fieldType == 'input'"
                  />
                  <el-input-number
                    v-model="form[custom.aavName]"
                    :step="0.1"
                    :max="999999999"
                    :controls="false"
                    style="text-align: left"
                    :placeholder="`请填写${custom.fieldName}`"
                    v-if="custom.fieldType == 'number'"
                  ></el-input-number>
                  <el-date-picker
                    v-model="form[custom.aavName]"
                    type="datetime"
                    :placeholder="`请选择${custom.fieldName}`"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    v-if="custom.fieldType == 'date'"
                  ></el-date-picker>
                  <!-- <el-input v-model="form[custom.aavName]" v-show="false"></el-input> -->
                  <el-checkbox-group
                    v-model="form[custom.aavName + 'rander']"
                    v-if="custom.fieldType == 'checkbox'"
                    @change="checkboxChange($event, custom.aavName)"
                  >
                    <el-checkbox
                      :label="checkItem.id"
                      v-for="checkItem in custom.childAttributes"
                      :value="checkItem.id"
                      :key="checkItem.id"
                      >{{ checkItem.fieldName }}</el-checkbox
                    >
                  </el-checkbox-group>

                  <el-select
                    v-model="form[custom.aavName]"
                    placeholder="请选择"
                    v-if="custom.fieldType == 'radio'"
                  >
                    <el-option
                      v-for="item in custom.childAttributes"
                      :key="item.id"
                      :label="item.fieldName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <div v-if="custom.fieldType == 'boxradio'">
                    <el-checkbox
                      v-for="(checkItem, i) in custom.childAttributes"
                      :key="checkItem.id"
                      :value="checkItem.ischeck"
                      @change="boxradioCheckClick($event, custom, checkItem, i)"
                    >
                      {{ checkItem.fieldName }}
                      <el-radio-group
                        class="boxradioRadioBox"
                        :class="{ show: checkItem.id == boxradioIsShow }"
                        v-model="form[custom.aavName + i]"
                        @change="boxradioChange($event, checkItem, custom, i)"
                      >
                        <el-radio
                          v-for="item2 in checkItem.childGameAttributes"
                          :key="item2.id"
                          :label="item2.id"
                        >
                          {{ item2.fieldName }}
                        </el-radio>
                      </el-radio-group>
                    </el-checkbox>
                  </div>
                </el-form-item>
                <div
                  v-if="
                    custom.fieldType == 'checkbox' ||
                    custom.fieldType == 'boxradio'
                  "
                ></div>
              </span>
            </div>
          </el-collapse-item>
          <el-collapse-item title="图片信息" name="3"> </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
    <!-- <div class="footer_box">
      <div class="left_box">
        <div class="info_one box_info">生成详情图</div>
        <div class="txt">查看图片</div>
      </div>
      <div class="left_box">
        <div class="bg_color">提交审核</div>
        <div class="info_new">关闭</div>
      </div>
    </div> -->
    <div class="dialog-footer">
      <div class="left_box">
        <div>
          <el-button style="background-color: #f3f7fa; border: none"
            >生成详情图</el-button
          >
        </div>
        <div class="txt">查看图片</div>
      </div>
      <div>
        <el-button
          @click="submit"
          style="background-color: #0065ff; border: none; color: #fff"
          >提交审核</el-button
        >
        <el-button @click="colsesubmit">关闭</el-button>
      </div>
    </div>
    <!-- 扫码 -->
    <lolAuth ref="lolAuth" @success="getLOLinfo"></lolAuth>
    <cfAuth ref="cfAuth" @success="getCFinfo"></cfAuth>
    <wwAuth ref="WWAuth" @success="getLwwinfo"></wwAuth>
    <JCCAuth ref="JCCAuth" @success="getJCCinfo"></JCCAuth>
  </div>
</template>

<script>
import recoveryInfoApi from "@/api/zyl/recovery/recoveryInfo";
import ImageCompressor from "image-compressor.js";
import { postUpload } from "@/api/upload";
// import selectPhone from "./selectPhone.vue";
import gameConfigApi from "@/api/gameConfig";
import goodsListApi from "@/api/gameConfig/goodsList";
import gameListApi from "@/api/gameConfig/gameList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
import infoApi from "@/api/autoProduction/information.js";
import makeImgsV3 from "@/utils/makeImgs-v3";
import { getToken } from "@/utils/auth";
import lolAuth from "@/components/getGameInfo/LOL.vue";
import supplyConfigApi from "@/api/system/supplyConfig";
import cfAuth from "@/components/getGameInfo/CF.vue";
import wwAuth from "@/components/getGameInfo/Ww.vue";
import JCCAuth from "@/components/getGameInfo/JCC.vue";
import ImageViewer from "element-ui/packages/image/src/image-viewer";
import draggable from "vuedraggable";

export default {
  name: "RecoveryGameInfo",
  dicts: [
    "sys_inventory_status",
    "sys_recovery_search",
    "sys_yes_no",
    "sys_account_label",
    "sys_account_from",
    "sys_autoscreenshot_status",
    "sys_rebinding_type",
    "sys_client_type",
    "sys_contract_status",
    "sys_revier_status",
  ],
  props: {
    id: {
      type: Number,
      default: null,
    },
  },
  components: {
    lolAuth,
    cfAuth,
    wwAuth,
    ImageViewer,
    draggable,
    JCCAuth,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      gameList: [], // 游戏
      sysList: [], // 系统
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      GameSelectedType: null, //游戏类型
      activeNames: ["1", "2", "3"],
      configList: [], // 游戏配置
      attrs: [],
      uploadImgUrl: "",
      uploadVideoUrl: "",
      btnLoading: false,
      makeTitleImgBtnLoading: false,
      makeDetailImgBtnLoading: false,
    };
  },
  created() {
    this.getGameList();
    this.headers = {
      Authorization: "Bearer " + getToken(),
    };
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
    this.uploadVideoUrl = process.env.VUE_APP_BASE_API + "/upload/video";
  },
  inject: ["closefn"],
  methods: {
    colsesubmit() {
      this.reset();
      this.closefn();
      // this.$parent.activeTab = "recoveryData";
    },
    //提交
    submit() {
      console.log("this.form", this.form);
    },
    // 多选项改变
    checkboxChange(e, key) {
      if (e && e.length) {
        this.form[key] = e.join(",");
      } else {
        this.form[key] = "";
      }
    },
    // 点击多选框单选的多选框点击事件
    boxradioCheckClick(e, custom, checkItem, i) {
      if (this.boxradioIsShow == checkItem.id) {
        this.boxradioIsShow = "";
      } else {
        this.boxradioIsShow = checkItem.id;
      }
      checkItem.ischeck = false;
      checkItem.fieldName = checkItem.fieldName.split("(")[0];
      this.setValue(custom);
    },
    // 点击多选单选框中的单选框事件
    boxradioChange(e, checkItem, custom, i) {
      this.$nextTick(() => {
        this.boxradioIsShow = "";
        checkItem.ischeck = true;
        checkItem.childGameAttributes.forEach((r) => {
          if (r.id == this.form[custom.aavName + i]) {
            checkItem.fieldName =
              checkItem.fieldName.split("(")[0] + "(" + r.fieldName + ")";
          }
        });
        this.setValue(custom);
      });
    },
    // 原神多选框赋值
    setValue(custom) {
      // 赋值
      let arr = [];
      custom.childAttributes.forEach((item, ind) => {
        if (item.ischeck) {
          // 多选框选中 取子级单选选中的id
          arr.push(this.form[custom.aavName + ind]);
        }
      });
      if (arr && arr.length != 0) {
        this.form[custom.aavName] = arr.join(",");
      } else {
        this.form[custom.aavName] = "";
      }
      console.log("this.form[custom.aavName]", this.form[custom.aavName]);
      this.$forceUpdate();
    },
    /** 查询详情进行回显 */
    handleUpdateNew(row) {
      const id = row.id || null;
      // this.wzry = false;
      this.loading = true;
      goodsListApi.getGoodsDetail(id).then((response) => {
        // console.log("%c Line:435 🍧 response", "color:#b03734", response);
        // 请求自定义字段
        gameConfigApi
          .getGameConfig({ gameId: response.data.gameId })
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              let attrs = res.rows;
              if (attrs && attrs.length != 0) {
                attrs.forEach((r) => {
                  if (r.fieldType == "checkbox") {
                    this.$set(
                      response.data,
                      r.aavName + "rander",
                      response.data[r.aavName]
                        ? response.data[r.aavName].split(",")
                        : []
                    );
                    let arr = [];
                    if (
                      response.data[r.aavName + "rander"] &&
                      response.data[r.aavName + "rander"].length
                    ) {
                      response.data[r.aavName + "rander"].forEach((t) => {
                        arr.push(Number(t));
                      });
                    }
                    response.data[r.aavName + "rander"] = arr;
                  } else if (r.fieldType == "boxradio") {
                    // 原神的特殊多选，多选套单选的数据处理
                    if (response.data[r.aavName]) {
                      // 如果有选中项
                      let idsArr = response.data[r.aavName].split(",");
                      r.childAttributes.forEach((first, ind) => {
                        first.childGameAttributes.forEach((sec) => {
                          if (idsArr.includes(String(sec.id))) {
                            response.data[r.aavName + ind] = sec.id;
                            first.ischeck = true;
                            first.fieldName =
                              first.fieldName + "(" + sec.fieldName + ")";
                          }
                        });
                      });
                    } else {
                      r.childAttributes.forEach((first) => {
                        first.ischeck = false;
                      });
                    }
                  } else if (r.fieldType == "radio") {
                    this.$set(
                      response.data,
                      r.aavName,
                      response.data[r.aavName]
                        ? Number(response.data[r.aavName])
                        : ""
                    );
                  }
                  if (r.isEnable == "0" && r.must == "true") {
                    this.rules[r.aavName] = [
                      {
                        required: true,
                        message: `请输入${r.fieldName}`,
                        trigger: "change",
                      },
                    ];
                  } else {
                    if (this.rules[r.aavName]) {
                      delete this.rules[r.aavName];
                    }
                  }
                });
              }
              if (response.data.atta) {
                this.step3Imgs = JSON.parse(response.data.atta);
              }
              this.attrs = JSON.parse(JSON.stringify(attrs));
              console.log(
                "%c Line:913 🍡 this.attrs",
                "color:#2eafb0",
                this.attrs
              );
              this.form = JSON.parse(JSON.stringify(response.data));
              console.log(
                "%c Line:907 🍕 this.form",
                "color:#465975",
                this.form
              );
              this.selectedPhone = this.form.telnote;
              this.actived = this.form.gameName;
              this.reViewArea();
              // this.props.lazyLoad = this.reViewArea
            }
          });
        if (response.data.urlArr) {
          // this.imgFileList = response.data.urlArr;
          this.imgShowList = JSON.parse(JSON.stringify(response.data.urlArr));
        }
        if (response.data.titleImg) {
          this.titleImgList = [{ url: response.data.titleImg, name: "" }];
        }
        let video = {};
        this.videoList = [];
        if (response.data.videoUrl) {
          video.name = response.data.videoName;
          video.url = response.data.videoUrl;
          this.videoList[0] = video;
        }
      });
    },
    // 点击多选框单选的多选框点击事件
    boxradioCheckClick(e, custom, checkItem, i) {
      if (this.boxradioIsShow == checkItem.id) {
        this.boxradioIsShow = "";
      } else {
        this.boxradioIsShow = checkItem.id;
      }
      checkItem.ischeck = false;
      checkItem.fieldName = checkItem.fieldName.split("(")[0];
      this.setValue(custom);
    },
    // 点击多选单选框中的单选框事件
    boxradioChange(e, checkItem, custom, i) {
      this.$nextTick(() => {
        this.boxradioIsShow = "";
        checkItem.ischeck = true;
        checkItem.childGameAttributes.forEach((r) => {
          if (r.id == this.form[custom.aavName + i]) {
            checkItem.fieldName =
              checkItem.fieldName.split("(")[0] + "(" + r.fieldName + ")";
          }
        });
        this.setValue(custom);
      });
    },
    // 根据简介自动识别多选项
    zidongChange() {
      let arr = [];
      let tempArr = [];
      // if (this.form.des) {
      //   let desStr = this.form.des;
      //   arr = desStr.split(" ");
      // }
      if (this.form.des && this.form.gameName != "原神") {
        let desStr = this.form.des;
        arr = desStr.split(" ");
        tempArr = JSON.parse(JSON.stringify(arr));
        if (arr && arr.length) {
          arr.forEach((r) => {
            if (r && r.indexOf(",")) {
              tempArr = tempArr.concat(r.split(","));
            }
          });
        }
        arr = tempArr;
      }

      // if (this.form.des && this.form.gameName != '原神') {
      //   let desStr = this.form.des;
      //   desStr = desStr.replace(/-/g, "");
      //   if (this.form.gameName == '英雄联盟') {
      //     arr = desStr.split(",");
      //   } else {
      //     arr = desStr.split(" ");
      //     tempArr = JSON.parse(JSON.stringify(arr));
      //     if (arr && arr.length) {
      //       arr.forEach((r) => {
      //         if (r && r.indexOf(",")) {
      //           tempArr = tempArr.concat(r.split(","));
      //         }
      //       });
      //     }
      //     arr = tempArr;
      //   }
      // }
      if (this.form.gameName == "原神" && this.form.des) {
        let tempArr2 = [];
        let arr1 = this.form.des.split(": "); //字段分开
        arr1 &&
          arr1.length &&
          arr1.forEach((a1, j1) => {
            let arr2 = a1.split(" "); //字段名称和值分开
            if (arr2[1] && arr2[1].indexOf("冒险等级") > -1) {
              this.form.f7 = arr1[j1 + 1].split(" ")[0];
            }
            if (arr2[1] && arr2[1].indexOf("金色角色") > -1) {
              // 金色角色
              let i = arr2[1].charAt(0); //几命
              let arr3 = arr1[j1 + 1].split(" ")[0].split(","); //角色名称
              arr3.forEach((a3) => {
                if (a3.charAt(0) != "满" && i != 0) {
                  a3 = a3.replace(a3.charAt(0), i);
                }
                if (i == 0) {
                  a3 = "0命" + a3;
                }
                tempArr2.push(a3);
              });
            }
            if (arr2[1] && arr2[1].indexOf("武器") > -1) {
              // 武器
              if (arr2[1] != "拥有武器") {
                let i = arr2[1].charAt(0); //几精
                let arr3 = arr1[j1 + 1].split(" ")[0].split(","); //武器名称
                arr3.forEach((a3) => {
                  a3 = "精" + i + a3;
                  tempArr2.push(a3);
                });
              }
            }
          });
        arr = tempArr2;
      }
      console.log("%c Line:426 🍎 识别出的选项arr", "color:#465975", arr);
      // 回显勾选
      this.attrs.forEach((item) => {
        // if (this.form[item.aavName]) {
        if (item.fieldType == "checkbox" && item.childAttributes) {
          item.childAttributes.forEach((t2) => {
            arr.forEach((t3) => {
              if (t3 && t2.fieldName == t3) {
                if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                  this.form[item.aavName + "rander"].push(t2.id);
                }
              }
            });
          });
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");
          this.$forceUpdate();
        } else if (item.fieldType == "boxradio" && item.childAttributes) {
          item.childAttributes.forEach((t2, t2Ind) => {
            t2.childGameAttributes.forEach((t4) => {
              arr.forEach((t3) => {
                // t2.fieldName.indexOf(t3) > -1
                // t4.fieldName == t3
                if (t3 && t4.fieldName == t3 && !t2.ischeck) {
                  this.form[item.aavName + t2Ind] = t4.id;
                  t2.ischeck = true;
                  if (this.form[item.aavName].indexOf(t4.id) == -1) {
                    t2.fieldName = t2.fieldName.split("(")[0];
                    t2.fieldName = t2.fieldName + "(" + t4.fieldName + ")";
                  }
                }
              });
            });
          });
          this.setValue(item);
        }
        // }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        thirdId: "",
        f1: "",
        f2: "",
        f3: "",
        f4: "",
        f5: "",
        f6: "",
        f7: "",
        f8: "",
        f9: "",
        f10: "",
        f11: "",
        f12: "",
        f13: "",
        f14: "",
        f15: "",
        f16: "",
        f17: "",
        f18: "",
        f19: "",
        f20: "",
        f21: "",
        f22: "",
        f23: "",
        f24: "",
        f25: "",
        f26: "",
        f27: "",
        f28: "",
        f29: "",
        f30: "",
        f31: "",
        f32: "",
        f33: "",
        f34: "",
        f35: "",
        f36: "",
        f37: "",
        f38: "",
        f39: "",
        f40: "",
        systemId: "",
        // securityPhone: "",
        // telnote: "",
        des: "",
      };
      // this.form = {
      //   id: null,
      //   createBy: null,
      //   createTime: null,
      //   updateBy: null,
      //   updateTime: null,
      //   delFlag: null,
      //   remark: null,
      //   account: null,
      //   gameId: null,
      //   systemId: null,
      //   areaId: null,
      //   serverId: null,
      //   trading: null,
      //   recoveryChannel: null,
      //   accountNumber: null,
      //   accountPassword: null,
      //   recoveryPrice: null,
      //   clientType: null,
      //   payType: null,
      //   saleMoney: null,
      //   phone: null,
      //   changeUserId: null,
      //   name: null,
      //   numbers: null,
      //   cipher: null,
      //   nickName: null,
      //   isFriend: null,
      //   userId: null,
      //   contract: null,
      //   retrieve: null,
      //   payImg: null,
      //   antiAddictionImg: null,
      //   qqWalletImg: null,
      //   accountImg: null,
      //   descs: null,
      //   labelsId: null,
      //   rebindingTime: null,
      //   rebindingType: null,
      // };
      // this.formData = {
      //   serverId: null,
      // };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(id) {
      this.loading = true;
      recoveryInfoApi.getRecoveryInfo(id).then((response) => {
        this.form = response.data;
        console.log("response123", response);

        this.getGameConfig(this.form.gameId);
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            recoveryInfoApi.updateRecoveryInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.DiologTrue = false;
              this.getList();
            });
          } else {
            recoveryInfoApi.addRecoveryInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openDiologTrue = false;
              this.getList();
            });
          }
        }
      });
    },
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows;
        this.selectGameType(this.form.gameId);
      });
    },
    selectGameType(val) {
      if (!val) {
        val = null;
        this.sysList = [];
        this.carrierList = [];
        this.areaList = [];
        return;
      }
      this.gameList.forEach((r) => {
        if (r.id == val) {
          this.GameSelectedType = r.type;
        }
      });
      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList();
        this.getYysList();
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2();
      }
    },
    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "system",
        })
        .then((res) => {
          this.sysList = res.rows;
        });
    },
    // 获取运营商列表
    getYysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "carrier",
        })
        .then((res) => {
          this.carrierList = res.rows;
        });
    },
    // 运营商改变  获取大区列表
    getAreaList(e) {
      let obj = {
        gameId: this.form.gameId,
        systemKey: "group",
      };

      this.form.areaId = null;
      this.$set(this.form, "serverId", null);

      // 运营商改变 找出选择的运营商的对象
      if (e) {
        this.carrierList.forEach((i) => {
          if (i.id == e) {
            obj.systemKey = i.systemKey + "group";
          }
        });
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    // 大区改变  获取服务器列表
    getServiceList(e) {
      this.$set(this.form, "serverId", null);
      if (e) {
        gameDictionaryApi
          .getList({
            parentId: e,
          })
          .then((res) => {
            this.serverList = res.rows;
          });
      } else {
        this.serverList = [];
      }
    },
    //端游 直接获取大区
    getAreaList2() {
      let obj = {
        gameId: this.form.gameId,
        systemKey: "group",
      };
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    getAllUserList() {
      supplyConfigApi.getAllUserList().then((res) => {
        this.allUsers = res.rows;
      });
    },
    getGameName(gameId) {
      let gameName = "";
      this.gameList.forEach((r) => {
        if (r.id == gameId) {
          gameName = r.name;
        }
      });
      return gameName;
    },
    getGameConfig(gameId) {
      //   gameConfigApi.getGameConfig({ gameId: gameId }).then((res) => {
      //     this.configList = res.rows;
      //     if (this.configList.length > 0) {
      //       for (let config of this.configList) {
      //         if (config.fieldType == "number") {
      //           this.$set(this.form, config.aavName, undefined);
      //         } else if (config.fieldType == "checkbox") {
      //           this.$set(this.form, config.aavName, []);
      //           console.log(
      //             config.fieldName,
      //             config.aavName,
      //             this.form[config.aavName]
      //           );
      //         } else {
      //           this.$set(this.form, config.aavName, null);
      //         }
      //       }
      //     }
      //     console.log("form111", this.form);
      //   });
      // },
      gameConfigApi.getGameConfig({ gameId: this.form.gameId }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          let attrs = res.rows;
          if (attrs && attrs.length != 0) {
            attrs.forEach((r) => {
              if (r.fieldType == "checkbox") {
                this.$set(this.form, r.aavName + "rander", []);
                if (r.fieldType == "boxradio") {
                  r.childAttributes.forEach((first) => {
                    first.ischeck = false;
                  });
                }
              } else {
                this.$set(this.form, r.aavName, "");
              }
              if (r.isEnable == "0" && r.must == "true") {
                if (r.fieldType == "checkbox") {
                  this.rules[r.aavName + "rander"] = [
                    {
                      required: true,
                      message: `请选择${r.fieldName}`,
                      trigger: "change",
                    },
                  ];
                } else {
                  this.$set(this.rules, r.aavName, [
                    {
                      required: true,
                      message: `请输入${r.fieldName}`,
                      trigger: "change",
                    },
                  ]);
                }
              } else {
                if (this.rules[r.aavName]) {
                  delete this.rules[r.aavName];
                }
              }
            });
          }

          this.attrs = JSON.parse(JSON.stringify(attrs));
          // this.$nextTick(()=>{
          //   this.$refs["form" + this.activedIndex][0].resetFields()
          // })
        }
      });
    },
    /**
     *
     *  穿越火线 获取 start
     */

    //获取角色列表
    getQRcodeCF() {
      let obj = {
        gameId: this.form.gameId == 6 ? 3 : 4,
      };
      if (this.form.gameId == 6) {
        obj.type = "qq";
      } else {
        if (!this.form.carrierId) {
          this.$alert("请先选择运营商！");
          return;
        }
        obj.type = this.form.carrierId == "41541" ? "qq" : "wx";
      }
      this.$refs.cfAuth.open(obj);
    },

    getCFinfo(data) {
      console.log("%c Line:1144 🍷 data", "color:#3f7cff", data);
      if (data.gameId == 3) {
        // CF
        if (data.propLevelNum) {
          this.form.f8 = data.propLevelNum[4] || ""; //V
          this.form.f9 = data.propLevelNum[2] || ""; // 王者级
          this.form.f10 = data.propLevelNum[3] || ""; //炼金级
        }
        this.showCFCheckbox(data);
      } else {
        // CFM
      }
    },
    //  回显  拼装简介
    showCFCheckbox(res) {
      let data = res;
      let str = "";
      let arr;
      if (data.skilList) {
        arr = data.skilList;
        console.log("%c Line:518 🍡 营地数据arr", "color:#4fff4B", arr);
      }
      if (arr && arr.length) {
        arr.forEach((r) => {
          str = `${str} ${r.szName}`;
        });
      }
      let str2 = `${data.roleInfo.roleDesc}  ${
        this.form.f8 ? this.form.f8 + "V武器" : ""
      } ${this.form.f9 ? this.form.f9 + "王者武器" : ""} ${
        this.form.f10 ? this.form.f10 + "炼金武器" : ""
      } `;
      this.form.des = str2 + str;
      // 回显
      // 回显勾选
      this.attrs.forEach((item) => {
        // if (this.form[item.aavName]) {
        if (item.fieldType == "checkbox" && item.childAttributes) {
          item.childAttributes.forEach((t2) => {
            arr.forEach((t3) => {
              if (t3 && t2.sid == t3.id) {
                if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                  this.form[item.aavName + "rander"].push(t2.id);
                }
              }
            });
          });
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");
          this.$forceUpdate();
        }
        // }
      });
      this.form.f11 = this.form["f19rander"].length || "";
      // 找出游戏下标
      let index = 0;
      this.gameList.forEach((t, i) => {
        if (t.name == this.actived) {
          index = i;
        }
      });
      this.$refs["form" + index][0].validate((valid) => {});
    },
    /**
     *
     *  穿越火线 获取 end
     */
    /**
     *
     *  王者荣耀个性化营地获取 start
     */

    //获取角色列表 f17是营地ID
    getRoleList() {
      if (this.form.f17) {
        this.btnLoading = true;
        infoApi
          .getRoleList({
            campId: this.form.f17,
          })
          .then((res) => {
            if (res.data) {
              this.btnLoading = false;
              this.roleList = res.data;
              if (this.roleList.length) {
                //遍历添加展示数据
                this.roleList.forEach((item) => {
                  item.zdytext = `${item.areaName}/${item.roleJob}/${item.roleName}`;
                });
                // this.formData.roleValue = this.roleList[0].zdytext;
                this.form.roleId = this.roleList[0].roleId;
                this.getRoleInfo(this.roleList[0].roleId);
              }
            }
          })
          .catch((err) => {
            this.btnLoading = false;
          });
      } else {
        this.$alert("请先填写营地ID！");
      }
    },
    //角色选中
    roleSelect(e) {
      this.getRoleInfo(e);
    },
    //获取角色详情
    getRoleInfo(roleId) {
      if (roleId) {
        this.btnLoading = true;
        infoApi
          .getRoleInfo({
            campId: this.form.f17,
            roleId: roleId,
          })
          .then((res) => {
            this.btnLoading = false;
            this.showCheckbox(res);
          });
      } else {
        this.$alert("请先选择角色信息！");
      }
    },
    //  回显  拼装简介
    showCheckbox(res) {
      console.log("%c Line:436 🌰 res", "color:#e41a6a", res);
      let data = res.data;

      this.$set(this.form, "systemId", data.skinMap.systemId);
      this.$set(this.form, "carrierId", data.skinMap.carrierId);
      this.$set(this.form, "groupId", data.skinMap.groupId);
      this.$set(this.form, "serverId", data.skinMap.serverId);
      this.qufuSelect = [
        data.skinMap.systemId,
        data.skinMap.carrierId,
        data.skinMap.groupId,
        data.skinMap.serverId,
      ];
      this.$set(this.form, "f6", data.skinMap.rongyaoCount);
      this.$set(this.form, "f8", data.skinMap.skinNum);
      this.$set(this.form, "f7", data.skinMap.heroNum);
      this.$set(this.form, "f4", data.skinMap.totalCount);
      let str2 = `${data.skinMap.areaName}-贵族积分${data.skinMap.totalCount}-V${data.skinMap.vipLevel}-${data.skinMap.skinNum}皮肤-${data.skinMap.heroNum}英雄 `;

      // this.zidongChange()
      if (data.skinMap.carrierId && data.skinMap.groupId) {
        this.getYysList(true, data.skinMap.carrierId, data.skinMap.groupId);
      }
      if (this.sysList && this.sysList.length) {
        this.sysList.forEach((r) => {
          if (r.id == this.form.systemId) {
            this.form.systemName = r.fieldName;
          }
        });
      }
      // 处理简介
      let str = "";
      let tempStr = "";
      if (data.listJson && data.listJson.length) {
        data.listJson.forEach((r) => {
          tempStr = tempStr + r.szHeroTitle + "-" + r.szTitle + " ";
        });
      }

      // 回显勾选
      this.attrs.forEach((item) => {
        if (item.aavName == "f2") {
          // 处理贵族等级
          item.childAttributes.forEach((t2) => {
            if (
              t2.fieldName.indexOf(data.skinMap.vipLevel) > -1 &&
              data.skinMap.vipLevel != 0
            ) {
              this.$set(this.form, "f2", t2.id);
            }
          });
        }
        if (
          item.fieldType == "checkbox" &&
          item.isEnable == 0 &&
          item.childAttributes &&
          item.childAttributes.length
        ) {
          console.log("%c Line:740 🍰 item", "color:#2eafb0", item);
          let times = 0;
          item.childAttributes.forEach((t2) => {
            // data.listJson
            console.log(
              "%c Line:742 🍿 data.listJson",
              "color:#f5ce50",
              data.listJson
            );
            data.listJson.forEach((t3) => {
              if (
                t3 &&
                (t2.fieldName == t3.szHeroTitle + "-" + t3.szTitle ||
                  t2.fieldName == t3.szTitle)
              ) {
                // 拼接简介
                if (times === 0) {
                  str = str + "\n【" + item.fieldName + "】 ";
                }
                times++;
                str =
                  str +
                  (t3.szHeroTitle ? t3.szHeroTitle : "") +
                  (t3.szHeroTitle ? "-" : "") +
                  t3.szTitle +
                  " ";
                if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                  this.form[item.aavName + "rander"].push(t2.id);
                }
              }
            });
          });
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");
          this.$forceUpdate();
        }
      });
      this.$set(this.form, "des", str2 + str + `\n营地ID:${this.form.f17} `);
      // 找出游戏下标
      let index = 0;
      this.gameList.forEach((t, i) => {
        if (t.name == this.actived) {
          index = i;
        }
      });
      this.$refs["form" + index][0].validate((valid) => {});
      // console.log("%c Line:436 🌰 res", "color:#e41a6a", res);
      // let data = res.data
      // let str = ''
      // if (data.listJson && data.listJson.length) {
      //   data.listJson.forEach(r => {
      //     str = str + r.szHeroTitle + '-' + r.szTitle + ' '
      //   })
      // }
      // this.$set(this.form, 'systemId', data.skinMap.systemId)
      // this.$set(this.form, 'carrierId', data.skinMap.carrierId)
      // this.$set(this.form, 'groupId', data.skinMap.groupId)
      // this.$set(this.form, 'serverId', data.skinMap.serverId)
      // // this.form.systemId = data.skinMap.systemId
      // // this.form.carrierId = data.skinMap.carrierId
      // // this.form.groupId = data.skinMap.groupId
      // // this.form.serverId = data.skinMap.serverId
      // // this.qufuSelect = [data.skinMap.systemName,data.skinMap.carrierName,data.skinMap.groupName,data.skinMap.serverName]
      // this.qufuSelect = [data.skinMap.systemId, data.skinMap.carrierId, data.skinMap.groupId, data.skinMap.serverId]

      // this.$set(this.form, 'f6', data.skinMap.rongyaoCount)
      // this.$set(this.form, 'f8', data.skinMap.skinNum)
      // this.$set(this.form, 'f7', data.skinMap.heroNum)
      // this.$set(this.form, 'f4', data.skinMap.totalCount)

      // let str2 = `${data.skinMap.areaName}-贵族积分${data.skinMap.totalCount}-V${data.skinMap.vipLevel}-${data.skinMap.skinNum}皮肤-${data.skinMap.heroNum}英雄 `
      // this.$set(this.form, 'des',str2 + str + ` 营地ID:${this.form.f17} `)
      // this.zidongChange()
      // if (data.skinMap.carrierId && data.skinMap.groupId) {
      //   this.getYysList(true, data.skinMap.carrierId, data.skinMap.groupId)
      // }
      // if (this.sysList && this.sysList.length) {
      //   this.sysList.forEach(r => {
      //     if (r.id == this.form.systemId) {
      //       this.form.systemName = r.fieldName
      //     }
      //   })
      // }
      // // 找出游戏下标
      // let index = 0
      // this.gameList.forEach((t,i)=>{
      //   if(t.name==this.actived){
      //     index = i
      //   }
      // })
      // this.$refs["form" + index][0].validate(valid => {

      // })
    },
    /**
     *
     *  王者荣耀个性化营地获取 end
     */
    /**
     *
     *  和平精英个性化营地获取 start
     */

    //获取角色列表 f13是营地ID
    getQRcode() {
      if (!this.form.carrierId) {
        this.$alert("请先选择运营商！");
        return;
      }
      this.btnLoading = true;
      infoApi
        .getHpQRcode({
          yingdi: this.form.f13,
          authType: this.form.carrierId == "57401" ? "1" : "2",
        })
        .then((res) => {
          console.log(
            "%c Line:465 🍎 和平营地授权二维码res",
            "color:#6ec1c2",
            res
          );
          if (res.data) {
            this.btnLoading = false;
            this.roleVisible = true;
            this.poxiaoHpQrcode = "data:image/png;base64," + res.data.qrcode;
            this.qrsig = res.data.qrsig;
          }
        })
        .catch((err) => {
          this.btnLoading = false;
        });
    },
    getHpInfo() {
      this.btnLoading = true;
      infoApi
        .getHPDatacode({
          qrsig: this.qrsig,
          authType: this.form.carrierId == "57401" ? "1" : "2",
        })
        .then((res) => {
          if (res.code == 200) {
            this.roleVisible = false;
            this.btnLoading = false;
            // this.form.f11 = res.data.fenseNum
            this.form.f16 = res.data.wangpaiLevel;
            this.form.f9 = res.data.qiangxie;
            this.form.f12 = res.data.texiao;
            this.form.f8 = res.data.shizhuang;
            this.form.f7 = res.data.zaiju;
            this.form.systemId = res.data.systemGroup.systemId;
            this.form.carrierId = res.data.systemGroup.carrierId;
            this.form.groupId = res.data.systemGroup.groupId;
            this.form.serverId = res.data.systemGroup.serverId;
            if (res.data.skilList) {
              res.data.skilList.forEach((r) => {
                if (r.list && r.list.length) {
                  if (r.type == "粉装") {
                    this.form.f11 = r.list.length;
                  }
                }
              });
              // res.data.skilList.map(e => {
              //   this.form.f11 =
              // })
            }
            if (this.form.carrierId && this.form.groupId) {
              this.getYysList(true, this.form.carrierId, this.form.groupId);
            }
            if (this.sysList && this.sysList.length) {
              this.sysList.forEach((r) => {
                if (r.id == this.form.systemId) {
                  this.form.systemName = r.fieldName;
                }
              });
            }
            this.showHpCheckbox(res.data);
          }
        });
    },
    //  回显  拼装简介
    showHpCheckbox(res) {
      let data = res;
      let str = "";
      let arr;
      let arrOnce = [];
      if (data.skilList) {
        arr = data.skilList;
        console.log("%c Line:518 🍡 营地数据arr", "color:#4fff4B", arr);
      }
      if (arr && arr.length) {
        arr.forEach((r) => {
          if (r.list && r.list.length) {
            str = `${str} 【${r.list.length}${r.type}】`;
            r.list.forEach((r2) => {
              arrOnce.push(r2);
              str = `${str} ${r2.name}`;
            });
          }
        });
      }
      let str2 = `${this.form.f16}王牌印记-${this.form.f11}粉装-${data.texiao}特效枪-${data.qiangxie}枪皮-${data.shizhuang}套装-${data.zaiju}载具 `;
      this.form.des = str2 + str + ` 营地ID:${this.form.f13} `;
      // 回显
      // 回显勾选
      this.attrs.forEach((item) => {
        // if (this.form[item.aavName]) {
        if (item.fieldType == "checkbox") {
          item.childAttributes.forEach((t2) => {
            arrOnce.forEach((t3) => {
              if (t3 && t2.fieldName == t3.name) {
                if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                  this.form[item.aavName + "rander"].push(t2.id);
                }
              }
            });
          });
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");
          this.$forceUpdate();
        }
        // }
      });
      // 找出游戏下标
      let index = 0;
      this.gameList.forEach((t, i) => {
        if (t.name == this.actived) {
          index = i;
        }
      });
      this.$refs["form" + index][0].validate((valid) => {});
    },
    /**
     *
     *  和平精英个性化营地获取 end
     */

    /**
     *
     *  金铲铲 获取 start
     */

    //获取角色列表
    getQRcodeJCC() {
      this.$refs.JCCAuth.open();
    },

    getJCCinfo(data) {
      console.log("%c Line:1340 🍔 data", "color:#4fff4B", data);
      // this.$store.dispatch("getShopInfo");
      this.form.f11 = data.level || ""; //等级
      this.form.f12 = data.heroNum || ""; //英雄数
      this.form.f13 = data.mapNum || ""; //棋盘数
      this.form.f14 = data.attNum || ""; //特效数
      // // 处理区服
      this.form.systemId = 61741;
      this.form.systemName = data.systemName;
      this.form.carrierId = 61744;
      // 获取大区
      if (this.carrierList && this.carrierList.length) {
        this.carrierList.forEach((t1) => {
          if (t1.id == this.form.carrierId) {
            this.form.carrierName = t1.fieldName;
            let obj = {
              gameId: "16",
              systemKey: t1.systemKey + "group",
            };
            gameDictionaryApi.getChildList(obj).then((res) => {
              this.areaList = res.rows;
              this.form.groupName = res.rows[0].fieldName;
              this.form.groupId = res.rows[0].id;
              gameDictionaryApi
                .getList({
                  parentId: res.rows[0].id,
                })
                .then((res2) => {
                  this.serverList = res2.rows;
                  this.form.serverName = res2.rows[0].fieldName;
                  this.form.serverId = res2.rows[0].id;
                });
            });
          }
        });
      }
      this.showJCCCheckbox(data);
    },
    //  回显  拼装简介
    showJCCCheckbox(res) {
      let data = res;
      let str = "";
      let arr;
      arr = data.skinList;
      if (data.attJson && data.attJson.length) {
        arr = arr.concat(data.attJson);
      }
      if (data.mapJson && data.mapJson.length) {
        arr = arr.concat(data.mapJson);
      }
      // console.log("%c Line:518 🍡 营地数据arr", "color:#4fff4B", arr);
      // if (arr && arr.length) {
      //   arr.forEach((r) => {
      //     str = `${str} ${r.name}`;
      //   });
      // }
      let str2 = `小小英雄:${data.heroNum}  等级:${data.level} 棋盘:${data.mapNum} 攻击特效:${data.attNum} `;

      // 回显
      // 回显勾选
      this.attrs.forEach((item) => {
        // if (this.form[item.aavName]) {
        if (item.fieldType == "checkbox" && item.childAttributes) {
          let strtemp = "";
          item.childAttributes.forEach((t2) => {
            arr.forEach((t3) => {
              if (t3 && t2.sid == t3.id) {
                // str = `${str} ${t2.fieldName}`
                strtemp = `${strtemp} ${t2.fieldName}`;
                if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                  this.form[item.aavName + "rander"].push(t2.id);
                }
              }
            });
          });
          if (strtemp) {
            str = `${str} \n【${item.fieldName}】 ${strtemp}`;
          }
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");
          this.$forceUpdate();
        }
        // }
      });
      this.form.des = str2 + str;
      // this.form.f11 = this.form["f19rander"].length || "";
      // // 找出游戏下标
      // let index = 0;
      // this.gameList.forEach((t, i) => {
      //   if (t.name == this.actived) {
      //     index = i;
      //   }
      // });
      // this.$refs["form"].validate((valid) => {});
    },
    /**
     *
     *  金铲铲 获取 end
     */

    // 无畏契约start
    WWGetQrcode() {
      this.$refs.WWAuth.open();
    },
    // 获取到游戏数据
    getLwwinfo(data) {
      console.log("%c Line:925 🍉 res", "color:#ed9ec7", data);

      this.form.wuweidian = data.costNum;
      this.form.yuanjingdian = data.rNum;

      let skinList = data.skinJsonList || [];
      // 处理区服 暂时写死
      this.form.groupId = 58979;
      this.form.groupName = "国服";
      this.form.serverId = 58980;
      this.form.serverName = "全服";
      // 获取服务器
      gameDictionaryApi
        .getList({
          parentId: this.form.groupId,
        })
        .then((res2) => {
          this.serverList = res2.rows;
        });
      // 匹配多选皮肤
      // 处理简介
      let str = ` 等级:${data.level} 无畏点数:${data.costNum} 源晶点数:${data.rNum} 皮肤数:${data.skinNum} 紫装数:${data.ziCount} \n `;

      // 处理套装
      const bundleJsonList = data.bundleJsonList || [];
      this.attrs.forEach((item) => {
        // if (this.form[item.aavName]) {
        if (
          item.fieldType == "checkbox" &&
          item.isEnable == "0" &&
          item.childAttributes
        ) {
          let subStr = "";
          item.childAttributes.forEach((t2) => {
            // 处理套装
            if (item.fieldKey == "bundleKey") {
              if (bundleJsonList && bundleJsonList.length) {
                bundleJsonList.forEach((bundle) => {
                  // 勾选 选中
                  if (bundle.bundleId == t2.sid && bundle.isLock === 0) {
                    // 选中的套装
                    if (
                      this.form[item.aavName + "rander"].indexOf(t2.id) == -1
                    ) {
                      this.form[item.aavName + "rander"].push(t2.id);
                    }
                  }
                  // 拼装简介
                  if (bundle.bundleId == t2.sid && bundle.skinNameList) {
                    subStr = `${subStr} ${t2.fieldName}（${bundle.skinNameList}）`;
                  }
                });
              }
            } else {
              // 处理被勾选的简介
              skinList.forEach((t3) => {
                if (t2.fieldName == t3.skinName) {
                  subStr = `${subStr} ${t2.fieldName}`;
                  if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                    this.form[item.aavName + "rander"].push(t2.id);
                  }
                }
              });
            }
          });
          this.form[item.aavName] =
            this.form[item.aavName + "rander"].join(",");

          if (item.key == "bundleKey") {
            if (subStr) {
              str = `${str}【${item.fieldName}】 ${subStr} \n `;
            }
          } else {
            if (this.form[item.aavName + "rander"].length) {
              str = `${str}【${item.fieldName}】 ${subStr} \n `;
            }
          }

          this.$forceUpdate();
        }
        // }
      });
      this.form.des = str;
      // 找出游戏下标  校验表单
      let index = 0;
      this.gameList.forEach((t, i) => {
        if (t.name == this.actived) {
          index = i;
        }
      });
      this.$refs["form"].validate((valid) => {});
    },
    //无畏契约 end

    /**
     *
     * LOL自动获取
     *
     * */
    lolGetQrcode(type) {
      this.$refs.lolAuth.open(type);
    },
    // 获取到游戏数据
    getLOLinfo(data) {
      console.log("%c Line:925 🍉 res", "color:#ed9ec7", data);
      if (data.type == "LOL") {
        // this.form.f16 = res.data.wangpaiLevel
        this.form.f3 = data.hero_num; //英雄数
        this.form.f4 = data.skin_num; //皮肤数
        this.form.f5 = data.color_skin_num; //炫彩数
        this.form.f2 = data.levelCode; //段位
        this.form.f21 = data.riotPoints; //点券
        this.form.f22 = data.influencePoints; //精碎
        let skinList = data.skinList;

        // // 处理区服
        if (this.areaList && this.areaList.length) {
          this.areaList.forEach((t1) => {
            if (t1.fieldName == data.group) {
              this.form.groupId = t1.id;
              this.form.groupName = t1.fieldName;
              // 获取服务器
              gameDictionaryApi
                .getList({
                  parentId: t1.id,
                })
                .then((res2) => {
                  this.serverList = res2.rows;
                  this.serverList.forEach((i) => {
                    if (i.fieldName == data.server) {
                      this.form.serverName = i.fieldName;
                      this.form.serverId = i.id;
                    }
                  });
                });
            }
          });
        }

        // 匹配多选皮肤
        // 处理简介
        let str = "";
        // skinList
        // 回显勾选
        this.attrs.forEach((item) => {
          // if (this.form[item.aavName]) {
          if (
            item.fieldType == "checkbox" &&
            item.isEnable == "0" &&
            item.childAttributes
          ) {
            item.childAttributes.forEach((t2) => {
              skinList.forEach((t3) => {
                if (t2.sid == t3) {
                  str = `${str} ${t2.fieldName}`;
                  console.log(
                    "%c Line:971 🎂 t2.fieldName",
                    "color:#93c0a4",
                    t2.fieldName
                  );
                  if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                    this.form[item.aavName + "rander"].push(t2.id);
                  }
                }
              });
            });
            let str2 = `${this.form.f3}英雄-${this.form.f4}皮肤-${this.form.f5}炫彩-段位：${data.levelName}`;
            this.form.des = str2 + str;
            this.form[item.aavName] =
              this.form[item.aavName + "rander"].join(",");
            this.$forceUpdate();
          }
          // }
        });
        // 找出游戏下标  校验表单
        let index = 0;
        this.gameList.forEach((t, i) => {
          if (t.name == this.actived) {
            index = i;
          }
        });
        this.$refs["form" + index][0].validate((valid) => {});
      } else if (data.type == "LOLM") {
        this.form.f5 = data.heroCount; //英雄数
        this.form.f6 = data.skinCount; //皮肤数
        let skinList = data.skinList;
        // // 处理区服
        if (data.system == "45984") {
          this.form.systemId = 53061;
          this.form.systemName = "安卓";
        } else if (data.system == "45985") {
          this.form.systemId = 53062;
          this.form.systemName = "苹果";
        }

        if (data.system == "45988") {
          this.form.carrierId = 53063;
          this.form.carrierName = "QQ";
        } else if (data.system == "45989") {
          this.form.carrierId = 53064;
          this.form.carrierName = "微信";
        }
        // this.form.systemId = data.system;
        // this.form.systemName = data.system;
        // this.form.carrierName = data.server;
        // this.form.carrierId = data.serverId;
        // 获取大区
        if (this.carrierList && this.carrierList.length) {
          this.carrierList.forEach((t1) => {
            if (t1.fieldName == data.server) {
              this.form.carrierId = t1.id;
              this.form.carrierName = t1.fieldName;
              let obj = {
                gameId: "25",
                systemKey: t1.systemKey + "group",
              };
              gameDictionaryApi.getChildList(obj).then((res) => {
                this.areaList = res.rows;
                this.form.groupName = res.rows[0].fieldName;
                this.form.groupId = res.rows[0].id;
                gameDictionaryApi
                  .getList({
                    parentId: res.rows[0].id,
                  })
                  .then((res2) => {
                    this.serverList = res2.rows;
                    this.form.serverName = res2.rows[0].fieldName;
                    this.form.serverId = res2.rows[0].id;
                  });
              });
            }
          });
        }
        // 匹配多选皮肤
        // 处理简介
        let str = "";
        // skinList
        // 回显勾选
        this.attrs.forEach((item) => {
          // if (this.form[item.aavName]) {
          if (
            item.fieldType == "checkbox" &&
            item.isEnable == "0" &&
            item.childAttributes
          ) {
            item.childAttributes.forEach((t2) => {
              skinList.forEach((t3) => {
                console.log(
                  "%c Line:1072 🍏 t3 t2",
                  "color:#4fff4B",
                  t3.skin_id,
                  t2.sid
                );

                if (t2.sid == t3.skin_id) {
                  str = `${str} ${t2.fieldName}`;
                  console.log(
                    "%c Line:971 🎂 t2.fieldName",
                    "color:#93c0a4",
                    t2.fieldName
                  );
                  if (this.form[item.aavName + "rander"].indexOf(t2.id) == -1) {
                    this.form[item.aavName + "rander"].push(t2.id);
                  }
                }
              });
            });
            let str2 = `${this.form.f5}英雄-${this.form.f6}皮肤`;
            this.form.des = str2 + str;
            this.form[item.aavName] =
              this.form[item.aavName + "rander"].join(",");
            this.$forceUpdate();
          }
          // }
        });
        // 找出游戏下标  校验表单
        let index = 0;
        this.gameList.forEach((t, i) => {
          if (t.name == this.actived) {
            index = i;
          }
        });
        this.$refs["form" + index][0].validate((valid) => {});
      }
    },
    /**
     *
     * LOL自动获取  结束
     *
     * */
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.handleUpdate(val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  height: calc(100vh - 226px);
  overflow: auto;
}

.form-data {
  // height: 600px;
  padding-bottom: 66px;
}
.info {
  display: flex;
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
  &-line {
    background-color: #0065ff;
    width: 4px;
    height: 28px;
    border-radius: 8px;
    margin-right: 10px;
  }
  &-title {
    &-erp {
      font-size: 14px;
      font-weight: 400;
      margin-left: 10px;
    }
  }
}

.dialog-footer {
  background-color: #fff;
  z-index: 1000;
  // width: 1479px;
  border-top: 1px solid #e6ebf5;
  // margin: 0 auto;
  height: 66px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left_box {
    display: flex;
    align-items: center;
    .box_info {
      width: 98px;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }

    .txt {
      margin-left: 26px;
      color: #333;
      cursor: pointer;
      font-size: 14px;
    }

    .info_one {
      background-color: #f3f7fa;
      font-size: 14px;
    }
  }
}
</style>

<style scoped lang="css">
.center {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);
}

.form-box {
  height: calc(100vh - 180px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.form-box >>> .el-input {
  width: 250px;
}

.form-box >>> .lattle-input .el-input {
  width: 170px;
}

.form-box >>> .lattle-input2 .el-input {
  width: 110px;
}

.form-box >>> .big-input .el-input {
  width: 100%;
}

.form-box >>> img {
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.boxradioitem {
  padding: 15px;
  border: 1px dashed #999;
  border-radius: 10px;
}

.el-radio {
  display: block;
  line-height: 22px;
}

.boxradioRadioBox {
  background: #fff;
  box-shadow: 0 0 7px #e3e3e3;
  padding: 10px;
  position: absolute;
  z-index: 99;
  left: 20px;
  top: 30px;
  display: none;
}

.boxradioRadioBox.show {
  display: block;
}

.hiddenupload >>> .el-upload--picture-card {
  display: none;
}

/* .form-box >>> .el-upload{
  text-align: left;
} */
.form-box >>> .el-upload-dragger {
  width: 148px;
  height: 148px;
}

>>> .el-dialog__body {
  padding: 10px;
}

>>> .el-tabs__nav-next,
.el-tabs__nav-prev {
  font-size: 18px;
}

.form-box >>> .el-form-item__content {
  max-width: calc(100% - 120px);
}

.form-box >>> .el-input-number {
  width: 250px;
}

.form-box >>> .el-input-number .el-input__inner {
  text-align: left;
}

.form-box >>> .el-checkbox {
  width: 230px;
  /* margin: 0; */
}

.form-box >>> .el-checkbox-group {
  width: 1400px !important;
  padding-left: 50px;
  /* width: 266px; */
  /* margin: 0 auto; */
}

.step-box {
  width: 100%;
  padding: 10px 50px;
}

.fbt {
  justify-content: space-around;
}
</style>
